.condition-groups {
  display: flex;
  width: 100%;
  flex: 0 0 auto;

  .condition-clause-switch {
    position: relative;
    display: flex;
    margin-right: 10px;

    .condition-clause-line {
      height: 100%;
      position: absolute;
      border: 1px solid var(--color-border);
      left: 50%;
    }

    ~ .condition-group-children {
      width: calc(100% - 46px);
    }
  }

  .condition-condition-op {
    :deep(.condition-item-add) {
      position: absolute;
      right: -10px;
    }
  }


  :deep(.arco-switch) {
    align-self: center;
    z-index: 1;
  }
}

.condition-group-children {
  width: 100%; // 默认宽度为100%

}

.condition-group-add {
  position: absolute;
  bottom: -10px;
  left: calc(50% + 1px);
  transform: translateX(-50%);
}

.condition-filter {
  margin-bottom: 10px;
  width: 100%;
  padding: 5px 0;
  flex: 0 0 auto;
}

.condition-filter-item {
  display: flex;
  width: 100%;

  .condition-item-btn {
    display: flex;
  }

  :deep(.arco-icon) {
    font-size: 14px;
    flex-shrink: 0;
    margin-left: 5px;
    align-self: center;
    min-width: 0;
    color: var(--color-text-2);
  }

  :deep(.add-btn) {
    &:hover {
      color: rgba(var(--primary-6));
      cursor: pointer;
    }
  }

  :deep(.delete-btn) {
    &:hover {
      color: rgba(var(--danger-6));
      cursor: pointer;
    }
  }
}
